{% extends "base.html" %}

{% block title %}用户面板 - 短视频去水印{% endblock %}

{% block content %}
<style>
    :root {
        --primary-color: #2196F3;
        --secondary-color: #00BCD4;
        --success-color: #4CAF50;
        --warning-color: #FFC107;
        --danger-color: #F44336;
    }

    .dashboard-card {
        border: none;
        border-radius: 15px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
        background: white;
        overflow: hidden;
    }

    .dashboard-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
    }

    .welcome-card {
        position: relative;
        background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
        color: white;
        overflow: hidden;
    }

    .welcome-card::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 60%);
        transform: rotate(45deg);
    }

    .vip-badge {
        display: inline-flex;
        align-items: center;
        padding: 5px 10px;
        border-radius: 20px;
        margin-left: 10px;
        background: rgba(255, 255, 255, 0.2);
        font-size: 0.9em;
    }

    .vip-badge i {
        margin-right: 5px;
    }

    .vip-badge.bronze {
        background: linear-gradient(45deg, #CD7F32, #B87333);
    }

    .vip-badge.silver {
        background: linear-gradient(45deg, #C0C0C0, #D3D3D3);
    }

    .vip-badge.gold {
        background: linear-gradient(45deg, #FFD700, #FFA500);
    }

    .stat-card {
        padding: 1.5rem;
        text-align: center;
        position: relative;
        overflow: hidden;
    }

    .stat-card::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    }

    .stat-card .icon {
        width: 60px;
        height: 60px;
        margin: 0 auto 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-size: 1.5rem;
        color: white;
        background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
        box-shadow: 0 4px 20px rgba(33, 150, 243, 0.3);
    }

    .activity-item {
        padding: 8px 2px;
        border-left: 3px solid transparent;
        transition: all 0.3s ease;
    }

    .activity-item:hover {
        border-left-color: var(--primary-color);
        background: rgba(33, 150, 243, 0.05);
    }

    .activity-icon {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
        color: white;
        margin-right: 1rem;
    }

    .badge {
        padding: 0.5rem 1rem;
        border-radius: 20px;
        font-weight: 500;
    }

    .badge-success {
        background: var(--success-color);
        color: white;
    }

    .badge-warning {
        background: var(--warning-color);
        color: white;
    }

    .copy-btn {
        border-radius: 0 20px 20px 0;
        padding: 0.375rem 1rem;
    }

    .form-control {
        border-radius: 20px 0 0 20px;
    }

    .input-group {
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        border-radius: 20px;
    }

    .support-info {
        padding: 1.5rem;
    }

    .support-item {
        display: flex;
        align-items: center;
        font-size: 1.2rem;
    }

    .support-item i {
        font-size: 2rem;
        margin-right: 1rem;
    }

    .support-text {
        font-size: 1.1rem;
    }

    .support-text strong {
        font-size: 1.3rem;
        color: var(--primary-color);
    }

    .api-info .form-group {
        margin-bottom: 1.5rem;
    }

    .api-info label {
        color: #666;
        margin-bottom: 0.5rem;
    }

    .api-info .input-group {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .activity-list {
        max-height: 500px;
        overflow-y: auto;
    }

    .activity-list::-webkit-scrollbar {
        width: 6px;
    }

    .activity-list::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.1);
        border-radius: 3px;
    }




</style>
<div class="row mb-4">
    <div class="col-md-12">
        <div class="card dashboard-card welcome-card">
            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col-md-8">
                        <div class="info-text">
                            <h5>欢迎回来，{{ user.username }}</h5>
                            {% if user.user_type.value == 'free' %}
                            <p class="mb-4">开通会员享受本站所有特权！</p>
                            <a href="/user/vip" class="btn btn-light">立即开通</a>
                            {% else %}
                            <div>您是 {{ user_type_label }}，每日解析上限：{{ daily_limit }}次，
                                升级权限享受所有特权！
                            </div>
                            {% if user.vip_expire %}
                            <p class="mb-4">到期时间：{{ user.vip_expire.strftime("%Y-%m-%d") }}</p>
                            {% endif %}
                            <a href="/user/vip" class="btn btn-light">升级权限</a>
                            {% endif %}
                        </div>
                    </div>
                    <div class="col-md-4">
                        <img src="/static/images/welcome.svg" class="img-fluid">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row mb-4">
    <div class="col-md-4">
        <div class="card dashboard-card">
            <div class="stat-card">
                <div class="icon">
                    <i class="fas fa-crown"></i>
                </div>
                <h5>会员状态</h5>
                <h2>{{ user_type_label }}</h2>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="card dashboard-card">
            <div class="stat-card">
                <div class="icon">
                    <i class="fas fa-sync-alt"></i>
                </div>
                <h5>今日解析上限 / 剩余次数</h5>
                <h2> {{ daily_limit }} / {{ remaining_calls }}</h2>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="card dashboard-card">
            <div class="stat-card">
                <div class="icon">
                    <i class="fas fa-key"></i>
                </div>
                <h5>接口权限</h5>
                {% if user.client_secret == '' %}
                <a href="/user/getapi" class="btn btn-primary btn-lg rounded-pill">申请开通</a>
                {% else %}
                <span class="badge badge-success">已开通</span>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-8">
        <div class="card dashboard-card">
            <div class="card-body">
                <h5 class="card-title"><i class="fas fa-headset mr-2"></i>技术支持</h5>
                <div class="support-info">
                    <div class="support-item">
                        <i class="fab fa-weixin text-success"></i>
                        <span class="support-text">微信：<strong>tiktokseo</strong></span>
                    </div>
                    <div class="mt-4">
                        <div class="alert alert-info">
                            <i class="fas fa-info-circle mr-2"></i>如有任何问题，请添加微信咨询
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- API信息卡片 -->
        <div class="card dashboard-card mt-4">
            <div class="card-body">
                <h5 class="card-title"><i class="fas fa-code mr-2"></i>接口信息</h5>
                <div class="api-info mt-3">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label><i class="fas fa-id-card mr-2"></i>接口ID</label>
                                <div class="input-group">
                                    <input type="text" id="apiId" class="form-control" value="{{ user.client_id }}"
                                           readonly>
                                    <div class="input-group-append">
                                        <button class="btn btn-info copy-btn" data-clipboard-target="#apiId"><i
                                                class="fas fa-copy"></i></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label><i class="fas fa-key mr-2"></i>接口密钥</label>
                                <div class="input-group">
                                    <input type="text" id="apiToken" class="form-control"
                                           value="{{ user.client_secret }}" readonly>
                                    <div class="input-group-append">
                                        <button class="btn btn-info copy-btn" data-clipboard-target="#apiToken"><i
                                                class="fas fa-copy"></i></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-link mr-2"></i>接口地址</label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="apiUrl"
                                   value="https://yourdomain.com/api/{{ user.client_id }}/{{ user.client_secret }}/?url=短视频链接"
                                   readonly>
                            <div class="input-group-append">
                                <button class="btn btn-info copy-btn" data-clipboard-target="#apiUrl"><i
                                        class="fas fa-copy"></i></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 调用记录部分 -->
    <div class="col-md-4">
        <div class="card dashboard-card">
            <div class="card-body">
                <h5 class="card-title"><i class="fas fa-history mr-2"></i>消费记录 <small
                        class="text-muted">（最近3条）</small></h5>
                <div class="activity-list">
                    {% if buy_records %}
                    {% for b in buy_records %}
                    <div class="activity-item d-flex align-items-start">
                        <div class="activity-content flex-grow-1">
                            <p class="mb-1 text-truncate" style="max-width: 100%; font-weight: 500;">
                                <img src="/static/images/{{ b.pay_type }}.png" alt="{{ b.pay_type }}" style="width: 22px;">
                                {% if b.vip_type == "month" or b.vip_type.value == "month" %}
                                【月卡】
                                {% elif b.vip_type == "season" or b.vip_type.value == "season" %}
                                【季卡】
                                {% elif b.vip_type == "year" or b.vip_type.value == "year" %}
                                【年卡】
                                {% endif %}
                                {{ b.order_id }}</p>
                            <small class="text-muted">{{ b.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</small>
                        </div>
                    </div>
                    {% endfor %}
                    {% else %}
                    <div class="activity-item text-center py-4">
                        <i class="fas fa-inbox fa-2x text-muted mb-3"></i>
                        <p class="text-muted">这里什么都没有</p>
                        <a href="/user/vip" class="btn btn-primary rounded-pill"><i
                                class="fas fa-crown mr-2"></i>立即开通</a>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="card dashboard-card">
            <div class="card-body">
                <h5 class="card-title"><i class="fas fa-history mr-2"></i>接口调用 <small
                        class="text-muted">（最近五条）</small></h5>
                <div class="activity-list">
                    {% if recent_logs %}
                    {% for log in recent_logs %}
                    <div class="activity-item d-flex align-items-start">
                        <div class="activity-icon mr-3">
                            <i class="fas fa-link fa-sm "></i>
                        </div>
                        <div class="activity-content flex-grow-1">
                            <p class="mb-1 text-truncate" style="max-width: 100%; font-weight: 500;">{{ log.url }}</p>
                            <small class="text-muted">{{ log.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</small>
                        </div>
                    </div>
                    {% endfor %}
                    {% else %}
                    <div class="activity-item text-center py-4">
                        <i class="fas fa-microchip fa-2x text-muted mb-3"></i>
                        <p class="text-muted">暂无调用记录</p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<!-- 引入 ClipboardJS -->
<script src="/static/js/clipboard.min.js"></script>
<script>
    function message(type, text) {
        const div = document.createElement('div');
        div.textContent = text;
        div.style.position = 'fixed';
        div.style.top = '5%';
        div.style.left = '50%';
        div.style.transform = 'translate(-50%, -50%)';
        div.style.padding = '10px 30px';
        div.style.background = '#fff'; // 白色背景
        div.style.color = type === 'success' ? '#28a745' : '#dc3545'; // 成功绿/错误红
        div.style.fontSize = '14px';
        div.style.fontWeight = '100';
        div.style.border = `1px solid ${type === 'success' ? '#cccccc' : '#dc3545'}`;
        div.style.borderRadius = '8px';
        div.style.boxShadow = '0 4px 15px rgba(0,0,0,0.2)';
        div.style.zIndex = 9999;
        div.style.opacity = 0;
        div.style.transition = 'opacity 0.3s ease, transform 0.3s ease';

        document.body.appendChild(div);

        // 动画出现
        requestAnimationFrame(() => {
            div.style.opacity = 1;
            div.style.transform = 'translate(-50%, -50%) scale(1)';
        });

        // 1.5 秒后淡出并移除
        setTimeout(() => {
            div.style.opacity = 0;
            div.style.transform = 'translate(-50%, -50%) scale(0.9)';
            setTimeout(() => div.remove(), 300);
        }, 1500);
    }
</script>

<script>
    // 绑定复制按钮
    var clipboard = new ClipboardJS('.copy-btn');

    // 复制成功
    clipboard.on('success', function (e) {
        message('success', '✅ 复制成功');
        e.clearSelection();  // 清除选中状态（优化体验）
    });

    // 复制失败
    clipboard.on('error', function (e) {
        message('error', '❌ 复制失败，请手动复制');
    });
</script>
{% endblock %}
